import React from 'react'
import { connect } from 'dva'
import { Card, Table, Divider, Tag } from 'antd'
import DescriptionList from 'components/DescriptionList'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import styles from './index.less'
import moment from 'moment'
import { contractOrderType, contractOrderStatus, productType, contractCancelStatus, purchaseType } from 'utils/enumConfig'
import ContractDetailModal from '../../../orderList/$state/ContractDetailModal'
import { LwjDownload } from 'components'
import { showButton } from 'utils/promissionFilter'

const OrderDetail = ({location, dispatch, orderDetail, app, loading}) => {
  const {user, resources} = app
  const {Description} = DescriptionList
  let {currentItemDetail, currentContractDetail, isShowContractDetailModal} = orderDetail
  let loaded = _.isEmpty(currentItemDetail)

  const breadcrumbList = [
    {
      title: '订单管理',
      href: `/orderList/${currentItemDetail.status}`
    }, {
      title: '全部订单',
      href: `/orderList/${currentItemDetail.status}`
    }, {
      title: '订单详情'
    }
  ]

  const contractOrderColumns = [
    {
      title: '合同号',
      dataIndex: 'contractNum',
      key: 'contractNum',
      width: 150
    }, {
      title: '订单类型',
      dataIndex: 'contractOrderType',
      key: 'contractOrderType',
      width: 100,
      render: (text, record, index) => (contractOrderType[record.contractOrderType])
    }, {
      title: '产品类型',
      dataIndex: 'productType',
      key: 'productType',
      width: 100,
      render: (text, record, index) => (productType[record.productType])
    }, {
      title: '是否需要设计',
      dataIndex: 'designNeeded',
      key: 'designNeeded',
      width: 100,
      render: (text, record, index) => (record.designNeeded ? '是' : '否')
    }, {
      title: '采购方式',
      dataIndex: 'purchaseType',
      key: 'purchaseType',
      width: 100,
      render: (text, record, index) => (purchaseType[record.purchaseType])
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (text, record, index) => (
        record.contractCancelStatus === 'NULL' ? contractOrderStatus[record.status] : contractCancelStatus[record.contractCancelStatus]
      )
    }, {
      title: '操作',
      dataIndex: 'handleType',
      key: 'handleType',
      width: 150,
      render: (text, record, index) => (
        <a onClick={() => onShowDetail(record)}>查看</a>
      )
    }
  ]

  // 合同详情 props
  const contractDetailModalProps = {
    title: '合同详情',
    visible: isShowContractDetailModal,
    destroyOnClose: true,
    width: 1000,
    currentContractDetail,
    footer: null,
    onCancel (record) {
      dispatch({
        type: 'orderDetail/hideContractDetailModal',
        payload: {}
      })
    },
    showOrderQuote: showButton('contractDetail.orderQuoteSummary', resources, user)
  }

  /**
   * 查看合同详情
   * @param {*} record
   */
  const onShowDetail = (record) => {
    dispatch({
      type: 'orderDetail/onShowContractDetail',
      payload: {
        contractOrderId: record.id
      }
    })
  }

  const isProject = currentItemDetail.salesOrderType === 'PROJECT'

  return (
    <PageHeaderLayout title={`订单详情`} breadcrumbList={breadcrumbList}>
      {!loaded &&
      <Card className={styles.card} bordered={false}>
        <ContractDetailModal {...contractDetailModalProps} />
        <DescriptionList
          size="large"
          title={(<div>
            意向单详情 {isProject && <Tag color="#f50">工程订单</Tag>}
          </div>)}
          style={{marginBottom: 32}}>
          <Description term="订单编号">{currentItemDetail.num}</Description>
          {currentItemDetail.sourceOrderNum && <Description term="第三方单号">{currentItemDetail.sourceOrderNum}</Description>}
          <Description term="创建时间">{moment(currentItemDetail.createTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
          <Description term="所属门店">{currentItemDetail.salesDistributorName}</Description>
          <Description term="客户姓名">{currentItemDetail.customerName}</Description>
          <Description term="客户手机号">{currentItemDetail.customerPhoneNum}</Description>
          <Description term="客户地址">
            {!_.isEmpty(currentItemDetail.customerProvince)
            && !_.isEmpty(currentItemDetail.customerCity)
            && !_.isEmpty(currentItemDetail.customerDistrict) ? currentItemDetail.customerProvince.name
              + currentItemDetail.customerCity.name
              + currentItemDetail.customerDistrict.name
              + currentItemDetail.customerAddress : '无'}
          </Description>
          <Description term="收货人姓名">{currentItemDetail.consigneeName}</Description>
          <Description term="收货人手机号">{currentItemDetail.consigneePhoneNum}</Description>
          <Description term="收货人地址">
            {!_.isEmpty(currentItemDetail.consigneeProvince)
            && !_.isEmpty(currentItemDetail.consigneeCity)
            && !_.isEmpty(currentItemDetail.consigneeDistrict) ? currentItemDetail.consigneeProvince.name
              + currentItemDetail.consigneeCity.name
              + currentItemDetail.consigneeDistrict.name
              + currentItemDetail.consigneeAddress : '无'}
          </Description>
          <Description term="销售员">{currentItemDetail.salesmanName}</Description>
          <Description term="意向产品说明">{currentItemDetail.desireProductMemo}</Description>
          <Description term="参与活动说明">{currentItemDetail.saleEvents}</Description>
          <Description term="备注信息">{currentItemDetail.memo}</Description>
          <Description term="意向产品清单">{<LwjDownload title={'点击下载'}
                                                   targetUrl={currentItemDetail.desireProductsAttachment}/>}</Description>
          {currentItemDetail.additionalRemark &&
          <Description term="老分销意向单信息">{currentItemDetail.additionalRemark}</Description>}
        </DescriptionList>
        <Divider style={{marginBottom: 32}}/>
        <div className={styles.title}>合同信息</div>
        <Table
          style={{marginBottom: 24}}
          pagination={false}
          dataSource={currentItemDetail.contractOrderSummaries}
          columns={contractOrderColumns}
          rowKey="id"/>
      </Card>
      }
    </PageHeaderLayout>
  )
}

export default connect(({orderDetail, app, loading}) => ({orderDetail, app, loading}))(OrderDetail)
